<!--
 * @Author: your name
 * @Date: 2020-11-25 09:06:45
 * @LastEditTime: 2021-01-13 18:43:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solax-design\src\views\projectList\steps.vue
-->
<template>
    <div class="steps-main-box">
        <template v-for='(item,index) in menus' >
            <div :key='item.id'  class="sub-menus-box" :class="active == item.id?'color-active':''" :style="item.next?'color: #FFAF40;':''" @click='changeMenus(item)'>
                <i :class="item.icon" style="margin-bottom:5px;"></i>
                <span>{{item.text}}</span>
            </div>
            <div v-if='index == menus.length-1 ? false:true' :key='item.id*10'><i class="el-icon-arrow-right"></i></div>
        </template>
    </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        next:{
            type:Boolean,
            default:false
        },
        menus:{
            type:Array,
            default:()=>{return []}
        },
        all:{
            type:Boolean,
            default:false 
        }
    },
    data() {
        return {
            active:1
        };
    },
    computed: {

    },
    watch: {
        next:{
            handler(nv,ov){
                 this.menus[this.active].next = nv
            },
            deep:true,
            immediate:true
        },
        all:{
            handler(nv,ov){
                if(nv){
                    this.menus.forEach(item =>{
                        item.next = true
                    })
                }
                if(nv == false){
                    this.menus.forEach(item =>{
                        if(item.id>this.active){
                            item.next = false
                        }
                        
                    })
                }
            },
            deep:true,
            immediate:true
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        changeMenus(item){
            if(!item.next){
                return
            }
            this.active = item.id
            this.$set(item,'next',true)
            this.$emit('input',this.active)
            if(this.next && item.id != 5){
                this.menus[this.active].next = this.next
            }
            // this.$route.query = {id:this.$route.query.id,active:this.active}
            this.$emit('changeClick',item)
        }
    },
};
</script>

<style  lang="less" scoped>
.steps-main-box{
    width: 80%;
    display: flex;
    margin: 0 auto;
    justify-content: space-evenly;
    align-items: center;
    font-size: 18px;
    color: #bbb;
    .sub-menus-box{
        display: flex;
        flex-direction:column;
        text-align: center;
        cursor:pointer;
        font-size: 15px;
        .iconfont{
            font-size:26px;
        }
    }
    .color-active{
        color: green !important;
        transition: .2s;
        transform: scale(1.1);
    }
}
</style>
